<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>数据分析</title>
		<link rel="stylesheet" href="assets/css/common.css">
		<link rel="stylesheet" href="assets/css/data.css">
	</head>
	<body>
		<div class="main-page">
			<div class="sub-page-container pdb-70">
				<div class="right-content-wrapper">
					<span class="close-btn"></span>
					<div class="right-content-box"> 
						<ul class="tags">
							<li>有组织</li>
							<li>&gt;</li>
							<li>数据分析</li>
						</ul>
						<div class="content-box"> 
							<div class="big-data line-one">
								<p class="card-title">区域空气质量</p>
								<div class="content-body" id="aqi"></div>
							</div>
							<div class="big-data line-two mgl-10">
								<p class="card-title">vocs分析</p>
								<div class="content-body" id="vocs"></div>
							</div>
							<div class="big-data">
								<p class="card-title">治理分析</p>
								<div class="content-body">
									<div class="table-tags"><span class="icon-tag-info">超标预警点位</span><span class="icon-tag-info">智能治理</span></div>
									<div class="table-box">
										<div class="left-box pdl-4">
											<table class="table">
												<thead>
													<tr>
														<th class="no">序号</th>
														<th class="date">报警时间</th>
														<th>区域</th>
														<th>设备名称</th>
														<th>状态</th>
														<th>治理方式</th>
														<th>治理时长</th>

													</tr>
												</thead>
												<tbody class="tbody" id="tbody">
													<tr>
														<td class="no">1</td>
														<td class="date">2021-03-12</td>
														<td>道路</td>
														<td>4#干雾机</td>
														<td class="complete">已处理</td>
														<td class="method">雾炮降尘</td>
														<td >2分钟</td>
													</tr>
													<tr>
														<td class="no">1</td>
														<td class="date">2021-03-12</td>
														<td>道路</td>
														<td>4#干雾机</td>
														<td class="un-complete">未处理</td>
														<td class="method">雾炮降尘</td>
														<td >2分钟</td>
													</tr>
													<tr>
														<td class="no">1</td>
														<td class="date">2021-03-12</td>
														<td>道路</td>
														<td>4#干雾机</td>
														<td class="un-complete">未处理</td>
														<td class="method">雾炮降尘</td>
														<td >2分钟</td>
													</tr>
													<tr>
														<td class="no">1</td>
														<td class="date">2021-03-12</td>
														<td>道路</td>
														<td>4#干雾机</td>
														<td class="un-complete">未处理</td>
														<td class="method">雾炮降尘</td>
														<td >2分钟</td>
													</tr>
													<tr>
														<td class="no">1</td>
														<td class="date">2021-03-12</td>
														<td>道路</td>
														<td>4#干雾机</td>
														<td class="un-complete">未处理</td>
														<td class="method">雾炮降尘</td>
														<td >2分钟</td>
													</tr>
													<tr>
														<td class="no">1</td>
														<td class="date">2021-03-12</td>
														<td>道路</td>
														<td>4#干雾机</td>
														<td class="un-complete">未处理</td>
														<td class="method">雾炮降尘</td>
														<td >2分钟</td>
													</tr>
												</tbody>
											</table>
										</div>
										<div class="right-table pdr-2">
											<table class="table">
												<thead>
													<tr>
														<th class="no">序号</th>
														<th>区域</th>
														<th>设备名称</th>
														<th class="date">日期</th>
													</tr>
												</thead>
												<tbody class="tbody">
													<tr>
														<td class="no">1</td>
														<td>道路</td>
														<td>4#干雾机</td>
														<td class="date">2021-03-12</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</table> 
								</div>
							</div> 
							<div class="big-data line-1 mgl-10">
								<p class="card-title">区域超标信息</p>
								<div class="content-body flex">
									<div class="left-box" id="region">2</div>
									<div class="right-box pdr-10">
										<table class="table">
											<thead>
												<tr>
													<th class="no">排名</th>
													<th>名称</th>
													<th>超标次数</th>
												</tr>
											</thead>
											<tbody class="tbody">
												<tr>
													<td class="no">1</td>
													<td>4#干雾机</td>
													<td>26</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div> 
					</div>
				</div>

			</div>
		</div>

		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script src="assets/js/jquery.SuperSlide.2.1.3.js"></script>
		<script src="assets/layui/layui.js"></script>
		<script src="assets/js/browser.js"></script>
		<script src="assets/js/page.js?v=33"></script>
		<script src="assets/js/echarts.min.js"></script>
		<script>
			var pageObj = function() {
				this.init();

				// 渲染左侧菜单树
			    new LeftSiderMenu({
			        el:".sub-page-container",
			        size:10,
			        curMenu:"数据分析",
			        menus:[
			            { href:"实时监测.html",text:"实时监测" },
			            { href:"数据分析.html",text:"数据分析" },
			            { href:"运行状态.html",text:"运行状态" },
			            { href:"告警分析.html",text:"告警分析" }
			        ]
			    });

			    // 渲染底部菜单
				new Footer({
			        el:".main-page",
			        curMenu:"有组织",
			        size:4,
			        menus:[
			            {href:"有组织.html",text:"有组织"},
			            {href:"无组织.html",text:"无组织"},
			            {href:"车辆出入.html",text:"清洁运输"},
			            {href:"视频.html",text:"视频大厅"}
			        ]
			    });

			}
			
			pageObj.prototype.init = function() {
				this.initPageStyle();
				this.initChart1();
				this.initChart2();
				this.initChart3();
			}
			pageObj.prototype.initPageStyle = function() {

			}

			pageObj.prototype.initChart1 = function() {
				//实例化对象
				var myChart = echarts.init(document.getElementById('aqi'));
				//吧配置给实例对象 
				myChart.setOption({
					color:['#00f2f1','#ed3f35','#FFF','pink','green','#ffaa00','#ffaa7f','#ff557f'],
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            lineStyle: {
				                color: {
				                    type: 'linear',
				                    x: 0,
				                    y: 0,
				                    x2: 0,
				                    y2: 1,
				                    colorStops: [{
				                        offset: 0,
				                        color: 'rgba(0, 255, 233,0)'
				                    }, {
				                        offset: 0.5,
				                        color: 'rgba(255, 255, 255,1)',
				                    }, {
				                        offset: 1,
				                        color: 'rgba(0, 255, 233,0)'
				                    }],
				                    global: false
				                }
				            },
				        },
				    },
				    legend: {
				        data: ['棚内', '皮带','产界','道路','环保局','县政府','小型空气站','12小时','15天','月'],
				        textStyle:{
				        	//修改图例文字颜色
				        	color:"#ffffff"
				        },
				        right:"2%",
						icon: "circle",
				    },
				    grid: {
				    	top:'20%',
				        left: '3%',
				        right: '5%',
				        bottom: '3%',
				        show:false,
				        borderColor:'#012f4a',//边框颜色
				        containLabel: true
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
						show:true,
				        data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11','12','13','14','15','16','17','18',
						'19','20','21','22','23','24'],
				        axisTick:{
				        	//去掉刻度线
				        	show:false
				        },
				        axisLabel:{
				        	color:'#4c9bfd'
				        },
				        axisLine:{
				        	//去除轴线
				        	show:false
				        }
				    },
				    yAxis: {
				        type: 'value',
						show:true,
				        axisTick:{
				        	//去掉刻度线
				        	show:false
				        },
				        axisLabel:{
				        	color:'#4c9bfd'
				        },
				        axisLine:{
				        	//去除轴线
				        	show:false
				        },
				        splitLine:{
						 //坐标轴在 grid 区域中的分隔线。	
							show:true,
							lineStyle:{
								color:"rgba(30, 57, 135, 0.57)"
							}
				        }
				    },
				    series: [
				        {
				            name: '棚内',
				            type: 'line',
				            stack: '总量',
				            smooth:true,
				            symbolSize:0,
				            data: [24,40,101,134,90,230,210,230,120,230,210,120,24,40,101,134,90,230,210,230,120,230,210,120]
				        },
				        {
				            name: '皮带',
				            type: 'line',
				            stack: '总量',
				            //修改折线图的线条显示带有弧度
				            smooth:true,
				            symbolSize:0,
				            data: [40,64,191,324,290,330,310,213,180,200,180,79,40,64,191,324,290,330,310,213,180,200,180,79]
				        },
						{
						    name: '产界',
						    type: 'line',
						    stack: '总量',
						    smooth:true,
						    symbolSize:0,
						    data: [24,40,101,134,90,230,210,230,120,230,210,120,40,64,191,324,290,330,310,213,180,200,180,79]
						},
						{
						    name: '道路',
						    type: 'line',
						    stack: '总量',
						    smooth:true,
						    symbolSize:0,
						    data: [24,40,101,134,90,230,210,230,120,230,210,120,24,40,101,134,90,230,210,230,120,230,210,120]
						},
						{
						    name: '环保局',
						    type: 'line',
						    stack: '总量',
						    smooth:true,
						    symbolSize:0,
						    data: [24,40,101,134,90,230,210,230,120,230,210,120,24,40,101,134,90,230,210,230,120,230,210,120]
						},
						{
						    name: '县政府',
						    type: 'line',
						    stack: '总量',
						    smooth:true,
						    symbolSize:0,
						    data: [24,40,101,134,90,230,210,230,120,230,210,120,24,40,101,134,90,230,210,230,120,230,210,120]
						},
						{
						    name: '小型空气站',
						    type: 'line',
						    stack: '总量',
						    smooth:true,
						    symbolSize:0,
						    data: [24,40,101,134,90,230,210,230,120,230,210,120]
						},
						{
						    name: '12小时',
						    type: 'line',
						    stack: '总量',
						    smooth:true,
						    symbolSize:0,
						    data: [24,40,101,134,90,230,210,230,120,230,210,120]
						},
						{
						    name: '15天',
						    type: 'line',
						    stack: '总量',
						    smooth:true,
						    symbolSize:0,
						    data: [24,40,101,134,90,230,210,230,120,230,210,120]
						},
						{
						    name: '月',
						    type: 'line',
						    stack: '总量',
						    smooth:true,
						    symbolSize:0,
						    data: [24,40,101,134,90,230,210,230,120,230,210,120]
						}
				    ]
				});
			}

			pageObj.prototype.initChart2 = function() {

				var vocsChart=echarts.init(document.getElementById('vocs'));
				vocsChart.setOption({
					color:['#0946FF;','#7748CD','#7B7B7B','#7C7B7B','#7B7B7B'],
	  				tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            lineStyle: {
				                color: {
				                    type: 'linear',
				                    x: 0,
				                    y: 0,
				                    x2: 0,
				                    y2: 1,
				                    colorStops: [{
				                        offset: 0,
				                        color: 'rgba(0, 255, 233,0)'
				                    }, {
				                        offset: 0.5,
				                        color: 'rgba(255, 255, 255,1)',
				                    }, {
				                        offset: 1,
				                        color: 'rgba(0, 255, 233,0)'
				                    }],
				                    global: false
				                }
				            },
				        },
				    },
				    legend:{
				    	right:10,
						icon: "circle",
				    	top:10,
				    	textStyle:{
				    		color:"#fff"
				    	}
				    },
				    xAxis: {
				        type: 'category',
				        axisLabel:{
				        	color:"#8995CB"
				        },
				        axisTick:{
				        	show:false
				        },
				        axisLine:{
				        	lineStyle:{
				        		color:"rgba(1,171,220,0.2)"
				        	}
				        },
				        data: ['01', '02', '03', '04','05', '06', '07', '08','09', '10', '11', '12']
				    },
				    yAxis: {
				    	name: '(mg/m³)',
				    	nameTextStyle:{
				    		color:"#ffffff"
				    	},
				    	type : 'value',
				    	axisLine:{
				        	show:false
				        },
				        axisTick:{
				        	show:false
				        },
			            axisLabel:{
				        	color:"#8995CB"
				        },
				        splitLine: {
				        	show: false
				        }
				    },
				    grid:{
				    	bottom:30,
				    	right:10
				    },
				    series: [
				    	{ 
				    		name:"甲醛生产区", 
				    		data: [82, 92, 13, 41,82, 92, 13, 41,82, 92, 13, 41],type: 'line',
				    		smooth: true,
				    		symbolSize:0,
				    		areaStyle: {
					            normal: {
					                color: new echarts.graphic.LinearGradient(0,0,0,1,
					                    [
					                    	{
					                            offset: 0,
					                            color: "rgba(9, 70, 255, 0.7)"
					                        },
					                        {
					                            offset: 1,
					                            color: "rgba(9, 70, 255, 0.1)"
					                        }
					                    ],
					                    false
					                )
					            }
					        }
				    	},
				    	{ 
				    		name:"能源中心", data: [22, 42, 23, 71,22, 42, 23, 71,22, 42, 23, 71],type: 'line',smooth: true,
				    		symbolSize:0,
							smooth: true,
				    		areaStyle: {
					            normal: {
					                color: new echarts.graphic.LinearGradient(0,0,0,1,
					                    [
					                    	{
					                            offset: 0,
					                            color: "rgba(47, 239, 238, 0.7)"
					                        },
					                        {
					                            offset: 1,
					                            color: "rgba(47, 239, 238, 0.1)"
					                        }
					                    ],
					                    false
					                )
					            }
					        }
				    	},
				    	{ name:"化产一车间冷鼓工段", data: [32, 12, 23, 71,32, 12, 23, 71,32, 12, 23, 71],type: 'line',smooth: true,
				    		symbolSize:0,
							smooth: true,
				    		areaStyle: {
					            normal: {
					                color: new echarts.graphic.LinearGradient(0,0,0,1,
					                    [
					                    	{
					                            offset: 0,
					                            color: "rgba(123, 123, 123, 0.6)"
					                        },
					                        {
					                            offset: 1,
					                            color: "rgba(123, 123, 123, 0.1)"
					                        }
					                    ],
					                    false
					                )
					            }
					        }
				    	},
				    	{ name:"甲醛生产区罐区工段", data: [32, 22, 33, 71,32, 12, 27, 71,32, 12, 23, 71],type: 'line',smooth: true,
				    		symbolSize:0,
							smooth: true,
				    		areaStyle: {
					            normal: {
					                color: new echarts.graphic.LinearGradient(0,0,0,1,
					                    [
					                    	{
					                            offset: 0,
					                            color: "rgba(123, 123, 123, 1)"
					                        },
					                        {
					                            offset: 1,
					                            color: "rgba(123, 123, 123, 0.1)"
					                        }
					                    ],
					                    false
					                )
					            }
					        }
				    	},
				    	{ name:"氨水槽区", data: [32, 22, 33, 71,32, 12, 27, 71,32, 12, 23, 71],type: 'line',smooth: true,
				    		symbolSize:0,
							smooth: true,
				    		areaStyle: {
					            normal: {
					                color: new echarts.graphic.LinearGradient(0,0,0,1,
					                    [
					                    	{
					                            offset: 0,
					                            color: "rgba(123, 123, 123, 1)"
					                        },
					                        {
					                            offset: 1,
					                            color: "rgba(123, 123, 123, 0.1)"
					                        }
					                    ],
					                    false
					                )
					            }
					        }
				    	}
				    ]
				}); 
			}

			pageObj.prototype.initChart3 = function() {
				var regionChart=echarts.init(document.getElementById('region'));
				regionChart.setOption({
					color:['#0081FF','#7748CD','#CC5FFA'],
	  				tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            lineStyle: {
				                color: {
				                    type: 'linear',
				                    x: 0,
				                    y: 0,
				                    x2: 0,
				                    y2: 1,
				                    colorStops: [{
				                        offset: 0,
				                        color: 'rgba(0, 255, 233,0)'
				                    }, {
				                        offset: 0.5,
				                        color: 'rgba(255, 255, 255,1)',
				                    }, {
				                        offset: 1,
				                        color: 'rgba(0, 255, 233,0)'
				                    }],
				                    global: false
				                }
				            },
				        },
				    },
				    legend:{
				    	right:10,
				    	top:10,
						icon: "circle",
				    	textStyle:{
				    		color:"#fff"
				    	}
				    },
				    xAxis: {
				        type: 'category',
				        axisLabel:{
				        	color:"#8995CB"
				        },
				        axisTick:{
				        	show:false
				        },
				        axisLine:{
				        	lineStyle:{
				        		color:"rgba(1,171,220,0.2)"
				        	}
				        },
				        data: ['01', '02', '03', '04','05', '06', '07', '08','09', '10', '11', '12']
				    },
				    yAxis: {
				    	name: '(mg/m³)',
				    	type : 'value',
				    	nameTextStyle:{
				    		color:"#ffffff"
				    	},
				    	axisLine:{
				        	show:false
				        },
				        axisTick:{
				        	show:false
				        },
			            axisLabel:{
				        	color:"#8995CB"
				        },
				        splitLine: {
				        	show: false
				        }
				    },
				    grid:{
				    	bottom:30,
				    	right:10
				    },
				    series: [
				    	{ 
				    		name:"12小时", 
				    		data: [82, 192, 13, 41,182, 92, 113, 41,82, 92, 13, 41],type: 'line',
				    		smooth: true,
				    		symbolSize:0,
				    		areaStyle: {
					            normal: {
					                color: new echarts.graphic.LinearGradient(0,0,0,1,
					                    [
					                    	{
					                            offset: 0,
					                            color: "rgba(0, 129, 255, 0.71)"
					                        },
					                        {
					                            offset: 1,
					                            color: "rgba(0, 129, 255, 0.1)"
					                        }
					                    ],
					                    false
					                )
					            }
					        }
				    	},
				    	{ 
				    		name:"15天", 
				    		data: [82, 92, 13, 141,82, 192, 123, 41,82, 92, 13, 41],type: 'line',
				    		smooth: true,
				    		symbolSize:0,
				    		areaStyle: {
					            normal: {
					                color: new echarts.graphic.LinearGradient(0,0,0,1,
					                    [
					                    	{
					                            offset: 0,
					                            color: "rgba(9, 70, 255, 0.7)"
					                        },
					                        {
					                            offset: 1,
					                            color: "rgba(9, 70, 255, 0.1)"
					                        }
					                    ],
					                    false
					                )
					            }
					        }
				    	},
				    	{ 
				    		name:"月", 
				    		data: [82, 92, 13, 41,82, 92, 13, 41,82, 192, 13, 41],type: 'line',
				    		smooth: true,
				    		symbolSize:0,
				    		areaStyle: {
					            normal: {
					                color: new echarts.graphic.LinearGradient(0,0,0,1,
					                    [
					                    	{
					                            offset: 0,
					                            color: "rgba(204, 95, 250, 0.71)"
					                        },
					                        {
					                            offset: 1,
					                            color: "rgba(204, 95, 250, 0.1)"
					                        }
					                    ],
					                    false
					                )
					            }
					        }
				    	}
				    ]
				}); 
			}

			new pageObj();

		</script>
	</body>
</html>
